<ion-header>

  <ion-navbar>
    <ion-title>销售排名</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>

  <h5>本月销售目标为&nbsp;<strong class="red">{{targetAmount | number: '1.2-2'}}</strong>&nbsp;万</h5>
  <h6>
    <div>
      截止昨天已完成&nbsp;
      <strong class="red">{{actualAmount | number: '1.2-2'}}</strong>&nbsp;万
    </div>

    <div>
      还差&nbsp;
      <strong class="red">{{targetAmount - actualAmount | number:'1.2-2'}}</strong>&nbsp;万！
    </div>
  </h6>

  <accordion-list [title]="'前十名'" textColor="#FFF" hasMargin="false" [expanded]="true">
    <ion-list class="rank">
      <ion-item *ngFor="let item of topRankList; let i = index">
        <span class="text-rank">No.{{i+1}}</span>
        <span class="text-center">{{item.MDMC}}</span>
        <span item-end class="text-price">￥{{item.FWXSJE}}</span>
      </ion-item>
    </ion-list>
  </accordion-list>

  <accordion-list [title]="'后十名'" textColor="#FFF" hasMargin="false" [expanded]="false">
    <ion-list class="rank">
      <ion-item *ngFor="let item of lastRankList; let i = index">
        <span class="text-rank">No.{{i+1}}</span>
        <span class="text-center">{{item.MDMC}}</span>
        <span item-end class="text-price">￥{{item.FWXSJE}}</span>
      </ion-item>
    </ion-list>
  </accordion-list>

</ion-content>
